<fieldset ng-controller="ActionController as ac" ng-init="ac.init()">
    <legend><i class="fa fa-tasks"></i> Actions</legend>

    <div class="form-group">
        <label class="col-sm-2 control-label">Action Type</label>
        <div class="col-sm-10 form-inline">

            <ui-select ng-model="model.action.type"  theme="select2" style="width: 160px;">
                <ui-select-match placeholder="Type">${$select.selected.description}</ui-select-match>
                <ui-select-choices repeat="value.code as value in options.actionTypes | filter: $select.search">
                    <div ng-bind="value.description"></div>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>

    <div class="form-group" ng-if="model.action.type == 'control'">
        <label class="col-sm-2 control-label">Target</label>
        <div class="col-sm-10 form-inline">

            <ui-select ng-model="model.action.resourceID" theme="select2" style="width: 300px;">
                <ui-select-match placeholder="Device">
                    <ol class="breadcrumb breadcrumb-device">
                        <li><i class="fa fa-sitemap"></i> ${$select.selected.parent.title}</span></li>
                        <li><i class="fa ${$select.selected | deviceIcon}"></i> ${$select.selected.title}</li>
                    </ol>
                </ui-select-match>
                <ui-select-choices repeat="obj.id as obj in ac.targetDevices | filter: $select.search"
                                   group-by="ac.groupDevices">
                    <i class="fa ${obj | deviceIcon}"></i> <span ng-bind="obj.title"></span>
                </ui-select-choices>
            </ui-select>

            <input type="number" class="form-control" ng-model="model.action.value" placeholder="Value" style="width: 80px;" required />

        </div>
    </div>

    <div ng-if="model.action.type == 'webhook'">
        <div class="form-group">
            <label class="col-sm-2 control-label">URL*:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" ng-model="model.action.url" placeholder="http..."  />
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">Parameters:</label>
            <div class="col-sm-10">
                <textarea class="form-control" ng-model="model.action.parameters" placeholder="One By Line, Name = Value"></textarea>
            </div>
        </div>


        <div class="callout callout-default">
            <h4><i class="icon fa fa-info"></i> You can use Variables in URL and Params:</h4>
            $DEVICE_TITLE, $DEVICE_NAME, $VALUE
        </div>

    </div>


</fieldset>